<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度音乐</title>
    <script src="../../vue.js"></script>
    <link rel="stylesheet" href="css/baidu.css">

    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list-body li:nth-child(even) {
            background: yellow;
        }
        .list-body li:nth-child(odd) {
            background: #fff;
        }
        .list-body li:hover {
            background: green;
        }
        .list-body li.checkedColor {
            background: green;
        }
    </style>

</head>
<body>

<div class="wrap" id="app">
    <div class="baidu">
        <ul class="list list-head">
            <li>
                <div>
                    <input type="checkbox" v-model="isCheckedAll" />全选
                </div>
                <span>歌单</span>
                <span>歌手</span>
                <span>专辑</span>
            </li>
        </ul>
        <ul class="list list-body">
            <!--class="checkedColor"-->
            <li
                    v-for="item in list"
                    :class="{checkedColor: item.checked}"
            >
                <div>
                    <input v-model="item.checked" type="checkbox">
                </div>
                <span>{{item.song}}</span>
                <span>{{item.name}}</span>
                <span>{{item.album}}</span>
            </li>
        </ul>
        <div class="select">
					<span class="selectAll">

						<span>统计：</span>
					</span>
            <div class="others">
                <span><em></em>歌手有：{{list.length}}位</span>
                <span><em></em>专辑有{{albums}}张</span>
            </div>
        </div>
    </div>
</div>


<script>

    let data = [
        {
            id:Date.now()+Math.random(),
            name: '邓紫棋',
            song: '泡沫',
            checked: true,
            album: 10
        },
        {
            id:Date.now()+Math.random(),
            name: '王杰',
            song: '泡沫',
            checked: true,
            album: 10
        },
        {
            id:Date.now()+Math.random(),
            name: '周杰伦',
            song: '菊花台',
            checked: true,
            album: 10
        }
    ];


    let vm=new Vue({

        el:'#app',
        data:{
            list:data
        },

        computed:{

            isCheckedAll:{


                get(){
                    console.log('取值了');
                    return this.list.filter(item => item.checked).length === this.list.length;
                },

                set(newValue){
                    console.log(newValue);
                    this.list.forEach(item => item.checked = newValue)
                }

            },

            albums(){
                var n = 0;
                this.list.forEach(item => {
                    n += item.album
                })
                return n;
            }

        }

    });

</script>

</body>
</html>